<div id='calendar'></div>

<style>
    #calendar {
        max-width: 100%;
        margin: 40px auto;
    }

    .fc-timeline td {
        white-space: normal;
    }
    .fc-timeline-event .fc-title {
        white-space: normal;
        overflow: visible;
    }
    .fc-license-message {
        visibility: hidden;
    }
</style>
<script require="@full-calendar" init="#calendar">
    var calendarEl = document.getElementById('calendar');
    console.log("calendar",FullCalendar);

    var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: ['interaction', 'resourceTimeline'],
        timeZone: 'UTC',
        locale: "zh-cn",
        header: {
        },
        resourceAreaWidth: '10%',
        defaultView: 'resourceTimelineDay',
        scrollTime: '08:00',
        aspectRatio: 1.5,
        minTime: '07:00:00',
        maxTime: '23:00:00',
        views: {
            resourceTimelineDay: {
                buttonText: ':15 slots',
                slotDuration: '00:15'
            },
            resourceTimelineTenDay: {
                type: 'resourceTimeline',
                duration: {days: 10},
                buttonText: '10 days'
            },
            resourceTimelineTwentyDay: {
                type: 'resourceTimeline',
                duration: {days: 12},
                buttonText: '12 days',
                slotDuration: '24:00:00'
            }
        },
        resourceLabelText: '项目',
        resources: {!! admin_javascript_json($resources) !!} ,
        events: "/api/reservation/timeline",
        eventClick: function(info) {
            console.log('Event: ' + info.event.title);
            console.log('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
            console.log('View: ' + info.view.type);

            // change the border color just for fun
            info.el.style.backGroundColor = 'red';
        }
    });

    calendar.render();
    console.log("calendar.getAvailableLocaleCodes()",calendar.getAvailableLocaleCodes());
</script>
